<template>
  <div>
    <el-form ref="dataForm" :model="form" class="el-dialog__body" label-width="100px">
      <div class="ledgerTitle">基本信息</div>
      <div style="margin: 0 auto; width: 945px;">
        <el-row style="font-size: 15px; line-height: 2.6;">
          &ensp;&ensp;&ensp;&ensp;{{form.content}}
        </el-row>
      </div>
      <div class="ledgerTitle">整改情况</div>
      <el-row>
        <el-col>
          <el-table
            ref="table"
            :data="tableData"
            :model="tableData"
            style="width: 100%"
            max-height="450"
            highlight-current-row
            @selection-change="updateSelectedRows"
          >
            <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column label="序号" width="100">
              <template #default="{ $index }">
                <span>{{ $index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="问题标题" width="200">
              <template #default="{ row }">
                <pre class="pre-style">{{ row.problemTitle }}</pre>
              </template>
            </el-table-column>
            <el-table-column label="整改措施">
              <template #default="{ row }">
                <pre class="pre-style">{{ row.rectificationMeasures }}</pre>
              </template>
            </el-table-column>
            <el-table-column label="完成情况" width="120">
              <template #default="{ row }">
                <DictTag :options="dict.type.ectification_situation" :value="row.rectifyStatus"></DictTag>
              </template>
            </el-table-column>
            <el-table-column label="佐证资料" width="280">
              <template #default="{ row, $index }">
                <el-upload
                  class="upload-demo"
                  ref="upload"
                  action="/admin/sys-file/upload"
                  :headers="{Authorization}"
                  :on-preview="handlePreview"
                  :show-file-list="true"
                  :file-list="row.fileList">
                  <i class="el-icon-paperclip" style="color: #409EFF;"></i>
                </el-upload>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <div class="ledgerTitle">整改报告</div>
      <el-row>
        <el-col>
          <el-form-item label="整改报告:">
            <web-document :form-data="form" :readWord="'view'" :pageType="'rectifyReport'"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>

import {mapGetters} from "vuex";
import {getNotice} from "@/api/adis/track/rectify";
import WebDocument from "@/components/form/webDocument.vue";
import {getRectifyReport} from "@/api/adis/track/rectifyReprot";

export default {
  name: 'RectifyView',
  props: {
    id: {
      type: String,
      default: ''
    },
    params: {
      type: Object,
    },
    isAudit: {
      type: Boolean,
      default: false,
    }
  },
  computed:{
    ...mapGetters(["permissions"])
  },
  dictTypes: ['audit_type_1_sub','ectification_situation'],
  components: {WebDocument},
  // dictTypes: ['audit_type'],
  data() {
    return {
      form: {},
      tableData:[],
      Authorization:''
    }
  },
  created() {
    this.Authorization = 'Bearer ' + this.$store.getters.access_token
  },
  watch: {
    id: {
      handler(val) {
        if (val) {
          getRectifyReport(this.id).then((res)=>{
            if (res.data.data !== null){
              this.handleReportResponse(res.data.data)
              this.$emit('data-loaded', true);
            } else {
              this.$emit('data-loaded', false);
            }
          }).catch(() => {
            this.$emit('data-loaded', false);
          })
        }
      },deep: true, immediate: true
    },
    params: {
      handler(val){
        if (val){
          this.handleReportResponse(val)
        }
      },deep: true, immediate: true
    },
  },
  methods: {
    handleReportResponse(val){
      this.$set(this, "form", val);
      this.form.number = "〔"+this.form.reportYear+"〕"+this.form.reportCode;
      this.tableData = this.form.rectifyReportProblems || []
      this.tableData.forEach(item => {
        item.fileList = []
        item.attachments.forEach(col => {
          item.fileList.push({name: col.fileName, url: col.fileUrl})
        })
      })
    },

    handlePreview (file) {
      // console.log(file.url);
      const a = document.createElement('a');
      let url = file.url ? file.url : file.response.data.url;
      console.log(url);      // let fileName = '你想要的文件名.docx'; // 这里设置你想要的文件名，包括扩展名
      a.setAttribute('download', file.name);
      a.setAttribute('href', url);
      a.click();
      // this.attachment.filePath = file.url ? file.url : file.response.data.url;
      // this.attachment.fileName = file.name;
      // let encodedPath = encodeURIComponent(this.attachment.filePath);
      // let encodedName = encodeURIComponent(this.attachment.fileName);
      // getSysFile(encodedPath,encodedName);
      // window.open(file.url ? file.url : file.response.data.url)
    },
    updateSelectedRows(selection) {
      this.selectedRows = selection;
    },
    openWord() {
      if(!this.form.wordFile) {
        this.$message({
          type: "warning",
          message: "该项尚未上传相关文书!"
        });
        return;
      }
      // this.$router.push({path:'/webOffice', query: {url: this.form.wordFile}})
      const { href } = this.$router.resolve({
        path: '/webOffice',
        query: {
          url: this.form.wordFile,
          type: this.isAudit ? 'edit' : 'view',
        }
      });
      window.open(href, '_blank');
    }
  }
}
</script>
